<template>
  <el-drawer v-model="showDialog" title="直推用户" destroy-on-close>
    <el-table :data="userTable.data" size="large" v-loading="userTable.loading">
      <el-table-column label="用户信息" min-width="180" align="center">
        <template #default="{ row }">
          <div class="flex flex-col items-center justify-center">
            <img
              class="w-[50px] h-[50px] mr-[10px] border border-solid border-gray-50"
              :src="row.user.avatar || '/avatar.png'"
              alt=""
            />
            <span>{{ row.user.nickname || '匿名' }}</span>
            <span>{{ row.user.mobile || '未绑定手机号' }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="身份等级" min-width="100">
        <template #default="{ row }">
          {{ row.levelWeightName }}
        </template>
      </el-table-column>
      <el-table-column label="邀请人数" min-width="100">
        <template #default="{ row }"> {{ row.inviteCount }}人 </template>
      </el-table-column>
      <el-table-column label="推广业绩" min-width="100">
        <template #default="{ row }"> {{ fenToYuan(row.achievementPrice) }} 元</template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <Pagination
      v-model:limit="userTable.searchParam.pageSize"
      v-model:page="userTable.searchParam.pageNo"
      :total="userTable.total"
      @pagination="loadTableData"
    />
  </el-drawer>
</template>

<script lang="ts" setup>
import { getPage } from '@/api/brokerage/user'
import { fenToYuan } from '@/utils'

const showDialog = ref(false)

const userTable = reactive({
  total: 0,
  loading: true,
  data: [],
  searchParam: {
    pageNo: 1,
    pageSize: 10,
    fatherUserId: ''
  }
})

const loadTableData = () => {
  userTable.loading = true
  getPage({
    ...userTable.searchParam
  })
    .then((res) => {
      userTable.loading = false
      userTable.data = res.list
      userTable.total = res.total
    })
    .catch(() => {
      userTable.loading = false
    })
}

const setInitData = async (row: any = null) => {
  if (row) {
    userTable.searchParam.pageNo = 1
    userTable.searchParam.fatherUserId = row.userId
    loadTableData()
  }
}

defineExpose({
  showDialog,
  setInitData
})
</script>
